<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <style>
        .img-card {
            position: relative;
            width: 300px;
            height: 500px;
            padding: 10px 10px;            
            margin: 30px 30px;            
            display: inline-block; 
            border-left: 2px dotted;
            border-right: 2px dotted;
            border-radius: 50px;             
        }
        .img-card img {
            position: absolute;
            width: 300px;
            transform: scale(0.5);
        }
        /*
        .img-card:hover {
            transition-duration: 2s;
            transform: scale(1.2) translate(300px, 0) rotateY(360deg);
        }
        */
        .img-head {
            top: 0px;
            z-index: 1000;
        }
        .img-foot {
            bottom: 0px;
            z-index: 1000;
        }
        .img-body {
            top: 50px;
            z-index: 999;
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="img-card">
            <img class="img-head" src="u.jpg"/>
            <img class="img-body" src="1.jpg"/>
            <img class="img-foot" src="d.jpg"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.jpg"/>
            <img class="img-body" src="2.jpg"/>
            <img class="img-foot" src="d.jpg"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.jpg"/>
            <img class="img-body" src="3.jpg"/>
            <img class="img-foot" src="d.jpg"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.jpg"/>
            <img class="img-body" src="4.jpg"/>
            <img class="img-foot" src="d.jpg"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.jpg"/>
            <img class="img-body" src="5.jpg"/>
            <img class="img-foot" src="d.jpg"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.jpg"/>
            <img class="img-body" src="6.jpg"/>
            <img class="img-foot" src="d.jpg"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.jpg"/>
            <img class="img-body" src="7.jpg"/>
            <img class="img-foot" src="d.jpg"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.jpg"/>
            <img class="img-body" src="8.jpg"/>
            <img class="img-foot" src="d.jpg"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.jpg"/>
            <img class="img-body" src="9.jpg"/>
            <img class="img-foot" src="d.jpg"/>
        </div>        
    </div>
</body>
